<template>
    <div class="sjyxqxcx_wrap">
        <div class="page-content">
            <div class="head-box">
                <div class="filter-box">
                    <span class="filter-label">日期选择：</span>
                    <el-date-picker
                            v-model="dateTime"
                            type="datetimerange"
                            range-separator="~"
                            :clearable="false"
                            @change="datePickerChange()"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                    <span class="filter-label">数据拉度选择：</span>
                    <el-radio-group v-model="interval">
                        <el-radio :label="5">5分钟</el-radio>
                        <el-radio :label="15">15分钟</el-radio>
                        <el-radio :label="60">60分钟</el-radio>
                    </el-radio-group>

                    <div class="btn-group">
                        <el-button class="hy_btn" @click="resetInfo()"><img src="../../assets/images/sjyxqxcx/icon_reset.png" alt="">重置</el-button>
                        <el-button class="hy_btn is_primary" type="primary" @click="getChartData()"><img src="../../assets/images/sjyxqxcx/icon_add.png" alt="">查询</el-button>
                    </div>
                </div>

                <div class="table-box">
                    <div class="panel-title">已选曲线</div>

                    <div class="table-content">
                        <el-table
                                :data="tableData"
                                class="hy_table"
                        >
                            <el-table-column
                                    prop="id"
                                    label="数据编码">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="数据名称">
                            </el-table-column>
                            <el-table-column
                                    prop="setId"
                                    label="数据源">
                            </el-table-column>
                            <el-table-column
                                    prop="unit"
                                    label="数据类型">
                            </el-table-column>
                            <el-table-column
                                    prop=""
                                    label="操作">
                                <template slot-scope="scope">
                                    <el-link type="primary" @click="handleDel( scope.$index )">删除</el-link>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>

            <div class="chart-box">
                <div class="search-box">
                    <span class="search-text">待添加曲线搜索：</span>
                    <el-select v-model="curveValue" placeholder="请选择" @change="curveChange()">
                        <el-option
                                v-for="(item,index) in curveList"
                                :key="index"
                                :label="item.name"
                                :value="index"
                                :disabled="curveAct.indexOf( index ) !== -1">
                        </el-option>
                    </el-select>
                </div>
                <div class="panel-title">查询结果：</div>

                <div class="chart-group">
                    <div class="chart-item" v-for="(item,index) in curveAct.length" :ref="`lineChart${ index }`"></div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                dateTime: [new Date(), new Date()],
                interval: 5,
                tableData: [],
                options: [],
                curveValue: '',
                curveList: [],
                curveAct: [],
            }
        },
        methods: {
            resetInfo() {
                this.dateTime = [ this.formatDate('YYYY-mm-dd ', new Date( )) +'00:00:00', this.formatDate('YYYY-mm-dd HH:', new Date( )) +'00:00' ];
                this.curveValue = '';
                this.curveList = [];
                this.curveAct = [];
                this.interval = 5;
            },

            getData() {
                this.$api.queryCurveList(
                    {
                        "fuzzy": "h2-01_utility_power h2_01_pv_power",
                    }
                ).then(( res )=> {
                    this.curveList = res || [];
                })
            },

            curveChange() {
                this.curveAct.push( this.curveValue );
                this.tableData.push( this.curveList[ this.curveValue ] );
                this.getChartData();
            },

            handleDel( index ) {
                this.curveAct.splice( index, 1 );
                this.tableData.splice( index, 1 );
            },

            datePickerChange( ) {
                this.dateTime = [ this.formatDate('YYYY-mm-dd HH:', new Date( this.dateTime[0] )) +'00:00', this.formatDate('YYYY-mm-dd HH:', new Date( this.dateTime[1] )) +'00:00' ]
            },

            getChartData() {
                var apiList = [];

                if( !this.curveAct.length ) {
                    return;
                }

                for ( var i=0; i<this.curveAct.length; i++ ) {
                    apiList.push(
                        this.$api.queryCharts(
                            {
                                "Name": this.curveList[ this.curveAct[i] ].id,
                                "selector": "LAST",
                                "begin": this.formatDate( 'YYYY-mm-dd HH:', new Date( this.dateTime[0] ) ) + ' 00:00',
                                "end": this.formatDate( 'YYYY-mm-dd HH:', new Date( this.dateTime[1] ) ) + ' 00:00',
                                "groupBlock": this.interval + "m",
                            }
                        )
                    )
                }

                Promise.all( apiList ).then( ( res )=> {
                    console.log( res )
                } )
            },

            chartLoad( obj ) {
                var _this = this;
                var chart = this.$echarts.init( this.$refs[ obj.id ] );

                var option = {
                    title: {
                        text: obj.title,
                        left: '0%',
                        top: '0%',
                        textStyle: {
                            color: '#333333',
                            fontSize: 16,
                        }
                    },
                    grid: {
                        top: '18%',
                        right: '2%',
                        bottom: '2%',
                        left: '2%',
                        containLabel: true,
                    },
                    tooltip: {
                        trigger: 'axis',
                        // formatter: '{b}:{c}',
                    },
                    legend: {
                        show: 'true',
                        data: obj.legend,
                        right: '0%',
                        top: '0%',
                        icon: 'circle',
                        itemGap: 25,
                        textStyle: {
                            fontSize: 14,
                            color: '#9A9FAF',
                        },
                    },
                    color: ['#2C50EE',],
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            axisLabel: {
                                formatter: '{value}',
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                                interval: 0,
                                rotate:40,
                            },
                            axisLine: {
                                show: false,
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#243753',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            data: obj.names,
                        },
                    ],
                    yAxis: [
                        {
                            boundaryGap: false,
                            type: 'value',
                            axisLabel: {
                                fontSize: 14,
                                margin: 13,
                                textStyle: {
                                    color: '#9A9FAF',
                                },
                            },
                            splitLine: {
                                lineStyle: {
                                    color: '#e3e3e3',
                                    type: 'dotted',
                                },
                            },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#283352',
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                    ],
                    series: [
                        {
                            name: obj.legend[0],
                            type: 'line',
                            // smooth: true,
                            // showSymbol: false,
                            lineStyle: {
                                normal: {
                                    width: 1.5,
                                    color: '#2C50EE',
                                },
                            },
                            areaStyle: {
                                normal: {
                                    color: new _this.$echarts.graphic.LinearGradient( 0, 0, 0, 1,
                                        [
                                            {
                                                offset: 0,
                                                color: 'rgba(44,80,238,0.09)',
                                            },
                                            {
                                                offset: 0.8,
                                                color: 'rgba(44,80,238,0)',
                                            },
                                        ],
                                        false
                                    ),
                                },
                            },
                            data: obj.value[0],
                        },
                    ],
                };

                chart.setOption( option );
            },
        },
        mounted() {
            this.dateTime = [ this.formatDate('YYYY-mm-dd ', new Date( )) +'00:00:00', this.formatDate('YYYY-mm-dd HH:', new Date( )) +'00:00' ];
            this.getData();

            // this.chartLoad(
            //     {
            //         names: ['08-01 12:00','08-01 13:00','08-01 14:00','08-01 15:00','08-01 16:00','08-01 17:00','08-01 18:00','08-01 19:00','08-01 20:00','08-01 21:00',],
            //         value: [
            //             [233, 233, 200, 180, 199, 233, 210,153, 133, 100, ],
            //         ],
            //         id: 'lineChart1',
            //         legend: ['', ],
            //         title: '功率（kW）',
            //     }
            // );
            // this.chartLoad(
            //     {
            //         names: ['08-01 12:00','08-01 13:00','08-01 14:00','08-01 15:00','08-01 16:00','08-01 17:00','08-01 18:00','08-01 19:00','08-01 20:00','08-01 21:00',],
            //         value: [
            //             [233, 233, 200, 180, 199, 233, 210,153, 133, 100, ],
            //         ],
            //         id: 'lineChart2',
            //         legend: ['', ],
            //         title: '电压（kV）',
            //     }
            // );
            // this.chartLoad(
            //     {
            //         names: ['08-01 12:00','08-01 13:00','08-01 14:00','08-01 15:00','08-01 16:00','08-01 17:00','08-01 18:00','08-01 19:00','08-01 20:00','08-01 21:00',],
            //         value: [
            //             [233, 233, 200, 180, 199, 233, 210,153, 133, 100, ],
            //         ],
            //         id: 'lineChart3',
            //         legend: ['', ],
            //         title: '温度（°C）',
            //     }
            // );
            // this.chartLoad(
            //     {
            //         names: ['08-01 12:00','08-01 13:00','08-01 14:00','08-01 15:00','08-01 16:00','08-01 17:00','08-01 18:00','08-01 19:00','08-01 20:00','08-01 21:00',],
            //         value: [
            //             [233, 233, 200, 180, 199, 233, 210,153, 133, 100, ],
            //         ],
            //         id: 'lineChart4',
            //         legend: ['', ],
            //         title: '某某某（%）',
            //     }
            // );
        }
    }
</script>

<style lang="less">
    .sjyxqxcx_wrap {
        width: 100%;
        height: 100%;
        position: relative;

        >.page-content {
            width: 100%;
            padding-bottom: 28px;

            >.head-box {
                width: 100%;
                min-height: 290px;
                padding: 44px 40px 40px;
                box-sizing: border-box;
                border-bottom: 2px solid #EEEFF2;
                position: relative;
                background-color: white;
                border-radius: 8px 8px 0 0;

                >.filter-box {
                    height: 68px;
                    border-bottom: 1px solid #EEEFF2;

                    >.filter-label {
                        font-size: 14px;
                        font-weight: 600;
                        color: #333333;
                    }

                    >.el-date-editor {
                        width: 350px;
                        height: 33px;
                        background-color: #F9FAFE;
                        border-color: #CFD1D8;
                        margin-right: 75px;

                        .el-input__icon {
                            line-height: 27px;
                        }

                        .el-range-input {
                            font-size: 13px;
                            background-color: transparent;
                            line-height: 27px;
                        }

                        .el-range-separator {
                            line-height: 27px;
                        }
                    }

                    >.el-radio-group {
                        margin-left: 10px;

                        .el-radio__label {
                            font-size: 14px;
                            color: #333333;
                        }
                    }

                    >.btn-group {
                        position: absolute;
                        right: 40px;
                        top: 40px;

                        .el-button {

                            img {
                                position: relative;
                                top: -0.1px;
                            }
                        }

                        .el-button.hy_btn + .el-button.hy_btn {
                            margin-left: 16px;
                        }
                    }
                }

                >.table-box {
                    padding-top: 27px;

                    >.table-content {
                        margin-top: 25px;
                        width: 100%;

                    }
                }
            }

            >.chart-box {
                width: 100%;
                padding: 27px 40px 79px;
                box-sizing: border-box;
                background-color: white;
                border-radius: 0 0 8px 8px;


                >.search-box {
                    line-height: 46px;
                    margin-bottom: 32px;

                    >.search-text {
                        font-size: 16px;
                        font-weight: 600;
                        color: #0E1526;
                    }

                    >.el-select {
                        width: 300px;
                    }
                }

                >.panel-title {
                    margin-bottom: 30px;
                }

                >.chart-group {
                    width: 100%;
                    height: auto;

                    >.chart-item {
                        display: inline-block;
                        vertical-align: top;
                        height: 355px;
                        width: 50%;
                        box-sizing: border-box;

                        &:nth-of-type( 2n + 1 ) {
                            border-right: 1px solid #CFD1D8;
                            border-top: 1px solid #CFD1D8;
                            padding-bottom: 30px;
                            padding-right: 10px;
                        }

                        &:nth-of-type( 2n ) {
                            border-top: 1px solid #CFD1D8;
                            padding-bottom: 30px;
                            padding-left: 10px;
                        }

                        &:nth-of-type( 1 ) {
                            border-top: 0;
                        }

                        &:nth-of-type( 2 ) {
                            border-top: 0;
                        }

                    }
                }
            }
        }
    }
</style>
